<template>
  <!-- 搜索 -->
  <el-row :gutter="20">
    <el-col :span="6">
      <el-select v-model="fnjiType" placeholder="请选择分类">
        <el-option label="家具" value="1" />
        <el-option label="家居" value="2" />
      </el-select>
    </el-col>
    <el-col :span="6">
      <el-input
        v-model="searchName"
        placeholder="请输入商品名词"
        size="normal"
        clearable
      ></el-input>
    </el-col>
    <el-col :span="6">
      <el-button type="primary" size="default" @click="handleSearch">
        查询
      </el-button>
    </el-col>
  </el-row>

  <!-- 商品列表 -->
  <el-row :gutter="20">
    <el-col v-for="(item, index) in prodList" :span="6">
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span class="title">{{ item.name }}</span>
          </div>
        </template>
        <el-image :src="'https://omsv2-static.fnji.com/' + item.picLeft" lazy />
        <template #footer>
          <el-tag :type="item.fnjiType == 1 ? 'primary' : 'danger'">{{
            item.fnjiType == 1 ? "家具" : "家居"
          }}</el-tag>
          <el-tag type="success">{{ item.category }}</el-tag>
          <el-button type="primary" size="small" @click="handleEdit(item)">
            编辑
          </el-button>
        </template>
      </el-card>
    </el-col>
  </el-row>
  <!-- 编辑弹窗 -->
  <el-dialog v-model="dialogVisible" title="编辑商品" width="500">
    <el-input v-model="name" autocomplete="off" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdate"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 分页 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[12, 24, 36, 48]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { ref } from "vue";
import { productGet, productPut } from "../../api/product";

//分页
const currentPage = ref(1); //当前选中的页码
const pageSize = ref(12); //每页显示的数量
const total = ref(0); //商品总数
const handleCurrentChange = async (page) => {
  console.log("当前选中的页码", page);
  let res = await productGet(page, pageSize.value);
  prodList.value = res.data.results;
};
const handleSizeChange = async (size) => {
  console.log("每页显示数据量", size);
  let res = await productGet(currentPage.value, size);
  prodList.value = res.data.results;
};

//首屏渲染
const prodList = ref([]);
let res = await productGet();
console.log(res); //输出并观察自己的接口数据包格式
prodList.value = res.data.results;
total.value = res.data.count;

//编辑
const dialogVisible = ref(false);
const name = ref(""); //记录被编辑商品的名称
const id = ref(""); //存放待编辑的商品obejctId
const handleEdit = (item) => {
  dialogVisible.value = true;
  name.value = item.name;
  id.value = item.objectId;
};
const handleUpdate = async () => {
  dialogVisible.value = false;
  await productPut(id.value, {
    //更新数据库
    name: name.value,
  });
  //实时更新本地列表数据
  for (let i = 0; i < prodList.value.length; i++) {
    if (prodList.value[i].objectId == id.value) {
      prodList.value[i].name = name.value;
      break;
    }
  }
};

//搜索
const fnjiType = ref(); //搜索分类
const searchName = ref('') //商品名词搜索
const handleSearch = async () => {
  let res = await productGet(currentPage.value, pageSize.value, {
    fnjiType: Number(fnjiType.value),
    name:searchName.value
  });
  prodList.value = res.data.results;
};
</script>

<style lang="scss" scoped>
.title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-col {
  margin-bottom: 20px;
}
</style>
